<template>
  <a-select :disabled="disabled" :placeholder="pl" v-model="optionsValue" allowClear @change="handleChange">
    <template v-for="item in options">
      <a-select-option :key="item.id" :value="item.id">
        {{ item.tag  }}
      </a-select-option>
    </template>
  </a-select>
</template>

<script>
import { dictValue } from '@/api/common'
export default {
  name: 'CustomSelect',
  props: {
    dictKey: {
      type: String,
      default: ''
    },
    pl: {
      type: String,
      default: '请选择',
    },
    values: {
      type: [String, Number],
      default: undefined
    },
    fieldLabel: {
      type: String,
      default: 'id'
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      options: [],
      optionsValue: undefined,
    }
  },
  mounted() {
    this.initData();
  },
  watch: {
    values: {
      handler(e) {
        this.optionsValue = e ? parseInt(e) : undefined;
      },
      deep: true,
      immediate: true,
    }
  },
  methods: {
    initData() {
      if (this.dictKey) {
        dictValue(this.dictKey).then(ret => {
          this.options = ret.data.dict_value
        })
      }
    },
    handleChange(e) {
      this.$emit('change', e)
    }
  }
}
</script>

<style lang='less' scoped>

</style>
